﻿<link href="/Modules/NineSeas.Dashboard/Styles/edit-book.css" rel="stylesheet" type="text/css"/>
<div ng-controller="EditChapterController" class="post-body alternate">
    <div class="post-body-content">
        <fieldset>
            <legend>The system will automatically name the chapter based on its order, if you leave the Name field blank</legend>
            <div class="form-group">
                <label style="display: block;">
                    Name
                    <input type="text" class="form-control" placeholder="Enter the name of the chapter..." ng-model="currentChapter.Title" ng-keyup="nameKeyUp()" />
                </label>
            </div>
            <div class="form-group">
                <label style="display: block;">
                    Content
                    <textarea class="form-control" ui-tinymce="tinymceOptions" ng-model="currentChapter.Content" rows="10"></textarea>
                </label>
            </div>
        </fieldset>
    </div>
    <div class="post-body-aside">
        <div style="margin-left: 10px">
            <button class="btn btn-large btn-block btn-primary" type="button">Create new chapter</button>
        </div>
        <div style="float: right; margin-left: 10px;" ng-show="showPaging">
            <pagination boundary-links="true" 
                num-pages="paging.TotalPages" 
                current-page="paging.Page" 
                class="pagination-large" 
                previous-text="&lsaquo;" 
                next-text="&rsaquo;" 
                first-text="&laquo;" 
                last-text="&raquo;"
                max-size="5"
                on-select-page="pageChanged(page)"></pagination>
        </div>
        <div class="clearfix"></div>
        <ul class="chapter-list">
            <li ng-repeat="chapter in chapters" ng-class="{selected: currentChapter && currentChapter.Id == chapter.Id}">
                <a href="javascript:;" ng-click="loadChapter(chapter.Id)" class="chapter-title">{{chapter.Title |chapterTitle:chapter.SortOrder}}</a>
                <span class="pull-right">
                    <a href="javascript:;" class="chapter-move-up" ng-click="moveUp($index)"><i class="icon-arrow-up"></i></a>
                    <a href="javascript:;" class="chapter-move-down" ng-click="moveDown($index)"><i class="icon-arrow-down"></i></a>
                    <a href="javascript:;" class="chapter-delete"><i class="icon-remove"></i></a>
                </span>
            </li>
        </ul>
        <div style="float: right; margin-left: 10px;" ng-show="showPaging">
            <pagination boundary-links="true" 
                num-pages="paging.TotalPages" 
                current-page="paging.Page" 
                class="pagination-large" 
                previous-text="&lsaquo;" 
                next-text="&rsaquo;" 
                first-text="&laquo;" 
                last-text="&raquo;"
                max-size="5"
                on-select-page="pageChanged(page)"></pagination>
        </div>
        <div class="clearfix"></div>
    </div>
    <div class="clearfix"></div>
</div>